import { inject, onMounted } from "vue"
import { createDraw } from '../utils/createDraw'
import { mapStore } from "@/store"
export const event = () => {
    const store = mapStore()
    let map
    let draw_source
    let draw_layer
    let high_source
    let high_layer
    onMounted(() => {
        map = inject('$map')
        draw_source = new ol.source.Vector({})
        draw_layer = new ol.layer.Vector({
            source: draw_source,
        })
        map.addLayer(draw_layer)

        // 创建高亮图层
        high_source = new ol.source.Vector({})
        high_layer = new ol.layer.Vector({
            source: high_source,
        })
        map.addLayer(high_layer)
    })

    const addPoint = () => {
        // 创建画笔
        let draw = createDraw({
            type: 'Point',
            source: draw_source
        })
        map.addInteraction(draw)

        draw.on('drawend', (evt) => {
            store.isAdd = true
            // console.log(evt.feature.getGeometry().getCoordinates())
            // 获取坐标
            store.position = evt.feature.getGeometry().getCoordinates()
            store.attr = []
            store.service = {
                name: 'xzd-plus',
                layerID: 0
            }
            map.removeInteraction(draw)
        })
    }

    const addPointOK = () => {
        var position = store.position
        var attr = store.attr
        var service = store.service
        store.addLists.push({
            center: position,
            driver: store.event_name,
            area: store.event_area,
            car_num: store.event_car_num,
            name: store.event_type,
            date: store.dateYMD,
            time: store.dateTime,
        })
        Point.add({
            position,
            attr,
            service,
            docLayer
        })
        store.total = store.addLists.length
        store.isAdd = false
    }

    const positionZoom = (evt) => {
        high_source.clear()
        map.getView().animate({
            center: evt.center,
            zoom: 16,
            duration: 2000,
        })
        let point = new ol.Feature({
            geometry: new ol.geom.Point(evt.center)
        })
        let style = setCanvasStyle(30, map)
        high_layer.setStyle(style)
        high_source.addFeature(point)
        store.isSearch = false
    }

    const isHandling = (evt) => {
        console.log(evt)
        store.addLists.splice(evt, 1)
    }

    return {
        addPoint,
        addPointOK,
        positionZoom,
        isHandling,
    }
}